<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<!-- 
		  子传父:
		  1.在父模板的子组件的标签上绑定一个自定义事件
		  2.在子组件的methods中触发自定义事件
		-->
		<div id="app">
			<parent></parent>
		</div>
		<template id="p">
			<!-- 必须有一个根标签 -->
			<div>
				<h3>父组件</h3>
				<div>{{name}}</div>
				<div>这是子传的数据:{{cname}}</div>
				<!-- 父传子 自定义属性 -->
				<child :ptoc="name" :ptoage="age" :ptow="worker" @ctop="getCData"></child>
			</div>
		</template>
		<template id="c">
			<div>
				<hr />
				<h5>子组件</h5>
				<div>{{name}}</div>
				<div>这是父传的数据:{{ptoc}}{{ptoage}}</div>
				<div>这是父传的数据:{{ptow.id}}{{ptow.name}}</div>
				<button @click="send">发送数据给父</button>
			</div>
		</template>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				components: {
					parent: { //父组件
						template: '#p',
						data() {
							return {
								name: '张三',
								age: 50,
								worker: {
									id: 1,
									name: '程序员',
									salary: 20000
								},
								cname: ''
							}
						},
						methods: {
							getCData(val) {
								this.cname = val
							}
						},
						components: {
							child: {
								template: '#c',
								data() {
									return {
										name: '张三三'
									}
								},
								methods: {
									send() {
										//触发自定义事件
										//参数1:自定义事件的名称
										//其它参数:要传递的数据
										this.$emit('ctop', this.name)
									}
								},
								props: {
									ptoc: {
										type: String, //类型限制
										required: true //必传
									},
									ptoage: {
										type: Number, //类型限制
										required: true, //必传
										default: 10 //默认值
									},
									ptow: {
										type: Object
									}
								}
							}
						}
					},
					//组件					
				}
			})
		</script>
	</body>
</html>
